<template>
    <div class="distribution">
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name:'distribution',
    data(){
        return {
            transitionName:''
        }
    },
    watch:{
        $route(to, from) {
            //如果to索引大于from索引,判断为前进状态,反之
            if (to.meta.index > from.meta.index) {
                this.transitionName = 'slide-left';
            } else {
                this.transitionName = 'slide-right';
            }
        }
    }
}
</script>

<style lang='less'>
@rem:100rem;

.distribution{
    width: 100%;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 300ms;
    position: absolute;
}
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
